<template>
  <el-dialog
    title="编辑用户信息"
    :visible="dialogVisible"
    width="35%"
    top="50px"
    :before-close="handleDialogVisible"
    v-if="dialogVisible"
  >
    <el-form ref="form" :value="myUserMsg" label-position="right">
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input v-model="myUserMsg.nickName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleUpdateUser">确 定</el-button>
      <el-button @click="colseDialogVisible">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateUser } from "@/apis/home";

export default {
  props: [
    "dialogVisible",
    "handleDialogVisible",
    "userMsg",
    "paginationMsg",
    "getUserListMsg",
    "colseDialogVisible",
  ],
  data() {
    return {
      formLabelWidth: "80px",
      myUserMsg: {},
    };
  },
  methods: {
    handleUpdateUser() {
    
      this.$confirm("确定要修改吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await updateUser({
            ...this.myUserMsg
          });
          const { pageNum, pageSize } = this.paginationMsg;
          this.getUserListMsg(pageNum, pageSize);
          this.handleDialogVisible();
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch((e) => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
  },
  watch: {
    userMsg(newVal, oldVal) {
      this.myUserMsg = { ...newVal };
    },
  },
};
</script>

<style lang="less" scoped>
form {
  padding: 0;
}
:deep .el-form-item {
  width: 100%;
}
</style>
